import React from 'react';
import {Form, Input, Button, Radio, message} from 'antd';
import {service} from "../service/service";
import {Redirect} from "react-router-dom";
import {inject} from "../utils/inject_service";
import {observer} from "mobx-react";


import "antd/lib/form/style";
import "antd/lib/input/style";
import "antd/lib/button/style";
import "antd/lib/radio/style";
import "antd/lib/message/style";
import "../css/reg.css";


@inject({service})
@observer
export default class Reg extends React.Component {
    constructor(props) {
        super(props);
        this.layout = {
            labelCol: {span: 8},
            wrapperCol: {span: 8},
        };

        this.tailLayout = {
            wrapperCol: {offset: 8, span: 16},
        };
    }

    sccessed(){
        message.success("用户创建成功!");
    }

    failed(){
        message.error("用户创建失败!")
    }

    reg(value) {
        this.props.service.bark();
        let username = value["username"];
        let password = value["password"];
        let role = value["role"];
        console.log(username, password, role);
        this.props.service.reg(this, username, password, role);

    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        this.props.service.reg_status = false;
    }

    render() {
        if (this.props.service.login_status){
            return (
                <h1>你已成功登录</h1>
            );
        }

        if (this.props.service.reg_status){
            return <Redirect to="/login" />
        }

        return (
                <div className="input_table">
                    <Form
                        {...this.layout}
                        name="basic"
                        initialValues={{remember: true}}
                        onFinish={this.reg.bind(this)}
                        // onFinishFailed={onFinishFailed}
                    >
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[{required: true, message: '请输入用户名!'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{required: true, message: '请输入密码!'}]}
                        >
                            <Input.Password/>
                        </Form.Item>

                        <Form.Item
                            label="密码确认"
                            name="confirm password"
                            dependencies={['password']}
                            hasFeedback
                            rules={[{required: true, message: '请确认密码!'},
                                ({getFieldValue}) => ({
                                    validator(rule, value) {
                                        if (!value || getFieldValue('password') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject('两次密码不一致!');
                                    },
                                })
                            ]}
                        >
                            <Input.Password/>
                        </Form.Item>

                        <Form.Item {...this.tailLayout} name="role" >
                            <Radio.Group>
                                <Radio value="teacher">教师</Radio>
                                <Radio value="student">学生</Radio>
                            </Radio.Group>
                        </Form.Item>


                        <Form.Item {...this.tailLayout}>
                            <Button type="primary" htmlType="注册">
                                    注册
                            </Button>
                        </Form.Item>
                    </Form>
                </div>

        );
    }
}